<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>homework02</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			button{
				width: 100px;
				height: 50px;
				border: none;
				margin-right: 5px;
				background-color: #dedede;
			}
			button.one{
				background-color: #ffd641;
			}
			div{
				width: 600px;
				height: 400px;
				position: absolute;
				top: 58px;
				left: 8px;
				background-color: #ffd641;
			}
			div p{
				line-height: 400px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<button class="one">tab01</button>
		<button class="two">tab02</button>
		<button class="three">tab03</button>
		<div>
			<p>tab文字内容一</p>
		</div>
		
		<script>
			$(".one").click(function(){
				$(".one").css("background-color","#ffd641");
				$(".two").css("background-color","#dedede");
				$(".three").css("background-color","#dedede");
				$("p").text("tab文本内容一");
			});
			$(".two").click(function(){
				$(".one").css("background-color","#dedede");
				$(".two").css("background-color","#ffd641");
				$(".three").css("background-color","#dedede");
				$("p").text("tab文本内容二");
			});
			$(".three").click(function(){
				$(".one").css("background-color","#dedede");
				$(".two").css("background-color","#dedede");
				$(".three").css("background-color","#ffd641");
				$("p").text("tab文本内容三");
			});
		</script>
	</body>
</html>